<template>
  <!-- 横向状态条 -->
  <div class="transverseDiv">
    <div class="tranDiv-information" >
      <div class="tranDiv-infor-fill" :style="{width:state}"></div>
    </div>
    <span>{{temperature}}{{unit}}</span>
  </div>
</template>

<script>
export default {
  name:'transverseDiv',
  props:['state','unit','temperature'],
}
</script>

<style lang="less" scoped>
  .transverseDiv{
    width:100%;display:flex;color:#fff;
    .tranDiv-information{
      height: 20px;border:1px solid #fff;box-sizing: border-box;width:60%;border-radius:4px;overflow: hidden;

      .tranDiv-infor-fill{
        height:100%;background:#67C23A;
      }
    }

    span{
      margin-left:10px;line-height: 20px;font-size:12px;color:#fff;
    }
  }
</style>